<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
	<head>
		<script src="qrc:/JQuery/Resources/jquery.js" type="text/javascript"></script>

		<script type="text/javascript">
		    function setProgressText(txt)
		    {
		        document.getElementById("propgressOutput").innerHTML = txt;
		    }

		    function onDownloadStart()
		    {
		        document.getElementById("downloadButton").disabled = true;
		        document.getElementById("urlInput").disabled = true;
		        setProgressText("downloaded 0%");
		    }

		    function onDownloadProgress(percentage)
		    {
		        setProgressText("downloaded " + percentage + "%");
		    }
		    
		    function onDownloadEnd(message)
		    {
		        setProgressText(message);
		        document.getElementById("downloadButton").disabled = false;
		        document.getElementById("urlInput").disabled = false;
		    }

			function onDownloadClick()
			{
			    var url = document.getElementById("urlInput").value;
				downloader.beginDownload(url);
			}
			
			function onReady()
			{
			    downloader.downloadingStart.connect(this, onDownloadStart);
			    downloader.downloadingProgress.connect(this, onDownloadProgress);
			    downloader.downloadingEnd.connect(this, onDownloadEnd);
			}

			$(document).ready(onReady);
		</script>

	</head>
	<body>

	    <div style="width: 100%">
	        <input type="text" id="urlInput" />
	        <input type="button" onclick="onDownloadClick()" value="Download" id="downloadButton"/>
	    </div>

	    <br>

	    <div style="width: 100%" id="propgressOutput">
	    </div>

	</body>
</html>